<template>
  <div ref="banner" class="Btn">
    <div>
      <div class="banner">
        <div>
          <img class="banner-img" :src="bannerImg" alt="图片" @click="changeShow()" />
        </div>

        <div class="banner-text">
          <!-- <div>
            <div class="lifyBg"></div>
            <img class="arrow-lift" src="@/assets/img/arrow-lift.png" alt="图片" />
          </div>-->
          <p class="bannerTxt">{{this.bannerName}}</p>
          <div>
            <div class="photoBg"></div>
            <div class="photo-cont">
              <img class="photo" src="@/assets/img/photo.png" alt="图片" />
              <p class="photo-cont-num">{{this.bannerImgNum}}</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 引入动画组件，进行包裹 -->
      <fade-animation>
        <gallery-carousel :imgs="imgUrl" v-show="show" @close="change"></gallery-carousel>
      </fade-animation>
    </div>
  </div>
</template>
<script>
import galleryCarousel from "@/components/gallery/galleryCarousel";
import fadeAnimation from "@/components/fade/fade";
export default {
  name: "detailBanner",
  props: {
    bannerImg: String,
    bannerName: String,
    bannerImgNum: null,
    bannerImglist: Array
  },
  components: {
    galleryCarousel,
    fadeAnimation
  },
  data() {
    return {
      show: false,
      imgUrl: []
    };
  },
  // 语法

  methods: {
    changeShow() {
      this.show = true;
      this.imgUrl = this.bannerImglist;
    },
    // 子组件触发 父组件做出改变
    change() {
      // this.imgUrl = this.bannerImglist
      this.show = false;
    }
  }
};
</script>
<style scoped>
.banner,
.banner .banner-img {
  overflow: hidden;
  width: 100%;
}
.banner .banner-text {
  position: absolute;
  top: 35px;
  font-size: 18px;
  color: #ffffff;
  text-indent: 10px;
}
.banner .banner-text .bannerTxt {
  position: relative;
  top: 135px;
  left: 0px;
}
.banner .banner-text .photoBg {
  width: 60px;
  position: relative;
  height: 25px;
  border-radius: 5px;
  background: #000;
  opacity: 0.4;
  top: 85px;
  left: 10px;
}
.banner .banner-text .photo {
  width: 20px;
  height: 16px;
  position: relative;
  top: 62px;
  left: 10px;
}
.banner .banner-text .photo-cont-num {
  font-size: 12px;
  position: relative;
  top: 42px;
  left: 35px;
}
</style>